<template>
  <!--    搜索头部区域-->
  <div style="padding: 10px; height: 50px; line-height: 50px; display: flex">
    <el-input
      v-model.trim="search"
      placeholder="请输入用户ID"
      style="width: 20%"
      clearable
    />
    <el-button
      type="primary"
      color="#fab6b6"
      style="margin-left: 10px"
      @click="find"
      >查询</el-button
    >
  </div>
  <div style="padding: 10px">
    <el-dialog v-model="dialogVisible" title="审核" width="30%">
      <el-form
          ref="ruleFormRef"
          style="max-width: 600px"
          :model="form"
          label-width="auto"
      >
        <el-form-item label="审核结果" >
          <el-radio-group v-model="form.status" fill="#fab6b6" text-color="#000000">
            <el-radio-button label="通过" :value="1" />
            <el-radio-button label="拒绝" :value="2" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核批复" >
          <el-input
              v-model="form.reason"
              style="width: 100%"
              :rows="5"
              type="textarea"
              placeholder="在此填写向用户的批复信息"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span>
          <el-button type="primary" color="#fab6b6" @click="save">
            确认</el-button
          >
        </span>
      </template>
    </el-dialog>
    <el-table :data="tableData" border="border">
      <el-table-column prop="id" label="申请ID" width="120px" />
      <el-table-column prop="userID" label="用户ID" />
      <el-table-column prop="podName" label="Docker名" />
      <el-table-column prop="cpu" label="cpu核心数" />
      <el-table-column prop="memory" label="内存(MB)" />
      <el-table-column prop="imageOS" label="操作系统" :formatter=formatOS />
      <el-table-column prop="imageVersion" label="操作系统版本" :formatter=formatVersion />
      <el-table-column prop="applyTime" label="申请时长(天)"  />
      <el-table-column prop="type" label="申请类型" :formatter=formatType />
      <el-table-column label="操作" width="100px" align="center">
        <template #default="scope">
          <el-button  @click="handleReason(scope.row)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 10px 0">
      <el-pagination
        v-model:currentPage="currentPage"
        :page-sizes="[5, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import request from "../../untils/request";

export default {
  name: "requestManage",

  data() {
    return {
      dialogVisible: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      result:0,
      form: {}, //某行数据
      search: "",
    };
  },
  created() {
    this.load();
  },
  methods: {
    find() {
      request
        .get("/user/findUserByID", {
          params: {
            pageNum: this.currentPage,
            pageSize: this.pageSize,
            search: this.search,
          },
        })
        .then((res) => {
          this.tableData = res.data.records;
          this.total = res.data.total;
        });
    },
    save() {
      if (this.form.status === 1) {
        this.$confirm("审核通过系统将尝试部署虚拟机是否确认？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          request.post("/podRequest/updateStatus", this.form).then((res) => {
            if (res.code === 0) {
              this.$message({
                type: "success",
                message: "处理成功",
              });
              this.dialogVisible = false;
              this.load();
            } else {
              this.$message({
                type: "error",
                message: res.message,
              });
            }
          });
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
      }else{
        request.post("/podRequest/updateStatus", this.form).then((res) => {
          if (res.code === 0) {
            this.$message({
              type: "success",
              message: "处理成功",
            });
            this.dialogVisible = false;
            this.load();
          } else {
            this.$message({
              type: "error",
              message: res.message,
            });
          }
        });
      }
    },
    load() {
      request.get("/podRequest/viewUnprocessedRequest", {
          params: {
            pageNum: this.currentPage,
            pageSize: this.pageSize,
          },
        })
        .then((res) => {
          this.tableData = res.data.records;
          this.total = res.data.total;
        });
    },
    formatOS(row){
      if (row.imageOS === "ubuntu") {
        return "Ubuntu";
      }
      if (row.imageOS === "centos") {
        return "CentOS";
      }
    },
    formatVersion(row){
      if (row.imageOS === "ubuntu" && row.imageVersion === "C") {
        return "22.04（GCC，G++捆绑包）";
      }
      if (row.imageOS === "ubuntu" && row.imageVersion === "Python") {
        return "22.04（Python捆绑包）";
      }
      return row.imageVersion;
    },
    formatType(row) {
      return row.type === 0 ? "虚拟机申请" : row.type === 1 ? "续租申请" : "未知";
    },
    handleReason(row) {
      this.form = JSON.parse(JSON.stringify(row));
      this.dialogVisible = true;
    },
    handleSizeChange(pageSize) {
      //改变当前每页的个数触发
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum) {
      //改变当前页码触发
      this.currentPage = pageNum;
      this.load();
    },
  },
};
</script>

<style scoped lang="less">
/deep/ .el-input {
  width: 85%;
}

/deep/ .el-dialog {
  background: #fcf9f4;
}

/deep/.el-form-item {
  margin-bottom: 30px;
}
</style>
<style lang="less">
.el-message-box {
  background: #fcf9f4;
}
</style>
